<template>
  <a-drawer v-if="visible" :append-to-body="true" :width="540" :visible="visible" :closable="false"
    @cancel="closeDrawer()" @ok="save()" ok-text="保存">
    <template #title>
      <EditableText :value="flowNodeConfig.name" @change="onNodeNameChange" />
    </template>
    <div class="common-drawer__content">
      <!--记录日志-->
      <div class="item-wrap sign-type">
        <div class="item-key-wrapper">
          <div class="item-key">记录日志</div>
        </div>
        <div class="item-content" style="margin:20px">
          是否开启
          <a-switch v-model="flowNodeConfig.enableLog" type="round" :checked-value="1" :unchecked-value="0" />
        </div>
      </div>
      <div class="item-wrap sign-type">

        <div class="item-key-wrapper">

          <div class="item-key">命令 <a-popover >
              <icon-question-circle />
              <template #content>
             例: java -jar app.jar &
              </template>
            </a-popover></div>
        </div>
        <div class="item-content">
          <JsEditor height="200" v-model:value="flowNodeConfig.command"></JsEditor>
        </div>
      </div>
      <div class="item-wrap sign-type">
        <div class="item-key-wrapper">
          <div class="item-key">结果处理脚本<a-popover >
              <icon-question-circle />
              <template #content>
             执行结果以 $ 形式传入(字符串)，例: boolean success = $.find('success')
              </template>
            </a-popover></div>
        </div>
        <div class="item-content">
          <JsEditor height="200" v-model:value="flowNodeConfig.runScript"></JsEditor>
        </div>
      </div>



    </div>

  </a-drawer>
</template>
<script setup>
import useApp from "@/hooks";
const { $ } = useApp();
import ArrayUtil from "../common/ArrayUtil";
import Snowflake from "../common/Snowflake";
import { IconDelete, IconSwap, IconPlus, IconQuestionCircle } from "@arco-design/web-vue/es/icon";
import EditableText from "@/components/common/EditableText.vue";
const visible = ref(false)
import { NODE } from "../common/FlowConstant";
$.on(NODE.COMMAND + '-drawer-open', config => {
  flowNodeConfig.value = config;
  visible.value = true;
})
let flowNodeConfig = ref({});
// 编辑节点名称
const onNodeNameChange = (name) => {
  flowNodeConfig.value.name = name;
  save(false);
};

const save = (leave = true) => {
  leave && closeDrawer();
};

const closeDrawer = () => {
  visible.value = false;
};

</script>
<style lang="less">
@import "./style/common.less";
</style>
